    <div class="register">
        <ul class="register">
            <li class="first"></li>
            <li class="second"></li>
            <li class="three"></li>
        </ul>
    </div>


    <div class="register-form">
        <div class="first-table" >
            <table  border="0">
                <tr>
                    <td class="table-label"><span style="color: red; font-size: 16px"> * </span> 用户类型:</td>
                    <td><div class="gender">
                            <div><input type="radio" name="register_type" value="farmer" checked />农户</div>
                            <div><input type="radio" name="register_type" value="distributor"/>经销商</div>
                            <div><input type="radio" name="register_type" value="other"/>其他</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="table-label"><span style="color: red; font-size: 16px"> * </span> 用户名:</td>
                    <td class="big-input"><?php print render($form['account']['name']); ?></td>
                </tr>
                <tr>
                    <td class="table-label"><span style="color: red; font-size: 16px"> * </span>密码:</td>
                    <td class="big-input"><?php print render($form['account']['pass']['pass1']); ?></td>
                </tr>
                <tr>
                    <td class="table-label"><span style="color: red; font-size: 16px"> * </span>确认密码:</td>
                    <td class="big-input"><?php print render($form['account']['pass']['pass2']); ?></td>
                </tr>
                <tr>
                    <td colspan="2" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="agreement" />我已阅读并同意《<a href="javascript:void(0)">聚农360用户注册协议</a>》</td>
                </tr>
                <tr>
                    <td colspan="2"><input type="button" id="register-btn" class="register-btn" value="立即注册" /></a></td>
                </tr>
            </table>
        </div>

        <div class="second-table" style="display: none;">
            <table border="0" >
                <tr>
                    <td class="table-label"><span style="color: red; font-size: 16px"> * </span> 姓名:</td>
                    <td class="big-input"><?php print render($form['farmer']['farmer_name']); ?></td>
                </tr>
                <tr>
                    <td class="table-label"><span style="color: red; font-size: 16px"> * </span>性别:</td>
                    <td><div class="gender"><?php print render($form['farmer']['gender']); ?></div></td>
                </tr>
                <tr>
                    <td class="table-label"><span style="color: red; font-size: 16px"> * </span>请选择省:</td>
                    <td class="big-select"><?php print render($form['farmer']['address']['province']); ?></td>
                </tr>
                <tr>
                    <td class="table-label"><span style="color: red; font-size: 16px"> * </span>请选择市:</td>
                    <td class="big-select"><?php print render($form['farmer']['address']['city']); ?></td>
                </tr>
                <tr>
                    <td class="table-label"><span style="color: red; font-size: 16px"> * </span>请选择县:</td>
                    <td class="big-select"><?php print render($form['farmer']['address']['county']); ?></td>
                </tr>
                <tr>
                    <td class="table-label">请选择镇:</td>
                    <td class="big-select"><?php print render($form['farmer']['address']['town']); ?></td>
                </tr>
                <tr>
                    <td class="table-label">请选择村:</td>
                    <td class="big-select"><?php print render($form['farmer']['address']['village']); ?></td>
                </tr>
                <tr>
                    <td class="table-label"><span style="color: red; font-size: 16px"> * </span>详细地址:</td>
                    <td class="big-input"><?php print render($form['farmer']['details']); ?></td>
                </tr>
                <tr>
                    <td class="table-label"><span style="color: red; font-size: 16px"> * </span>手机号:</td>
                    <td class="big-input"><?php print render($form['farmer']['cell']); ?></td>
                </tr>
                <tr>
                    <td></td>
                    <td class="register-btn"><?php print render($form['farmer']['sms_send']);?></td>
                </tr>
                <tr>
                    <td class="table-label"></td>
                    <td class="big-input"><?php print render($form['farmer']['graph_code']); ?><?php print render($form['farmer']['refresh_graph_code']); ?></td>
                </tr>
                <tr>
                    <td class="table-label"><span style="color: red; font-size: 16px"> * </span>短信验证码:</td>
                    <td class="big-input"><?php print render($form['farmer']['sms_code']); ?></td>
                </tr>
                <tr>
                    <td></td>
                    <td  class="registerbtn" ><input type="button" id="prev-btn" value="上一步" /><input type="button" id="next-btn"  value="下一步" /></td>
                </tr>
            </table>
        </div>

        <div class="three-table" style="display: none;">
            <div class="form-label">请确认下面注册信息无误:</div>
            <div style="clear: both;">
                    <li style="line-height:30px;"><span class="table-label" style="width: 30px;">用户名</span>：<span class="table-label name"></span></li>
                    <li style="line-height:30px;"><span class="table-label">用户类别</span>：<span class="table-label type"></span></li>
                    <li style="line-height:30px;"><span class="table-label">姓名</span>：<span class="table-label username"></span></li>
                    <li style="line-height:30px;"><span class="table-label">性别</span>：<span class="table-label gender"></span></li>
                    <li style="line-height:30px;"><span class="table-label">所在区域</span>：<span class="table-label address"></span></li>
                    <li style="line-height:30px;"><span class="table-label">详细地址</span>：<span class="table-label details"></span></li>
                    <li style="line-height:30px;"><span class="table-label">手机号码</span>：<span class="table-label cell"></span></li><br/>
                    <li class="registerbtn"><input type="button" id="prev-second-btn" value="上一步" />  <?php print render($form['submit']); ?></li>
            </div>
        </div>
    </div>

<?php print drupal_render_children($form); ?>


<script>
    var nonghuaBaseUrl = window.location.host;
    jQuery('#register-btn').click(function(){
        var flag = 0;
        if(!jQuery('input[name="name"]').val()|| !jQuery('input[name="pass[pass1]"]').val() || !jQuery('input[name="pass[pass2]"]').val()){
            flag = 1;
            alert("请将必填项填写完整！")
            return false;
        }else if(jQuery('input[name="pass[pass1]"]').val() != jQuery('input[name="pass[pass2]"]').val()){
            flag = 1;
            alert('密码与确认密码输入不一致！');
            return false;
        }
        if(jQuery('input[name="agreement"]').is(':checked') == true){
            flag =0;
        }else{
            flag =1;
            alert('请阅读并同意聚农360用户注册协议！');
            return false;
        }
        var params = [];
        params.push('parameters[name]=' + jQuery('input[name="name"]').val());

        jQuery.getJSON(nonghuaBaseUrl+'/api/CheckUser?' + params.join('&'), function (json) {
            if(json.isset == 1){
                flag =1;
                alert('用户名已经存在,换一个吧！');
                return false;
            }
        });
        if(flag == 0){
            jQuery('.first-table').hide();
            jQuery('.second-table').show();
            jQuery('.first').addClass("firstTrue")
            jQuery('.second').addClass("secondTrue")
        }
    })






    jQuery('#prev-btn').click(function(){
            jQuery('.second-table').hide();
            jQuery('.first-table').show();
            jQuery('.first').removeClass("firstTrue")
            jQuery('.second').removeClass("secondTrue")
    })


    jQuery('#prev-second-btn').click(function(){
            jQuery('.second-table').show();
            jQuery('.three-table').hide();
            jQuery('.three').removeClass("threeTrue")
            jQuery('.second').addClass("secondTrue")
    })


    jQuery('#next-btn').click(function(){


        var flag = 0;

        if(!jQuery('input[name="farmer_name"]').val() || !jQuery('input[name="gender"]').val() || !jQuery('select[name="province"]').val() || !jQuery('select[name="city"]').val() || !jQuery('select[name="county"]').val() || !jQuery('input[name="details"]').val() || !jQuery('input[name="cell"]').val()){
            flag = 1;
            alert("请将必填项填写完整！")
            return false;
        }
        if(!jQuery('input[name="sms_code"]').val()){
            flag = 1;
            alert("请填写短信验证码！");
            return false;
        }

        if(flag == 0 ){
            jQuery('.second-table').hide();
            jQuery('.three-table').show();
            jQuery('.second').removeClass("secondTrue")
            jQuery('.three').addClass("threeTrue")
        }

    /* three-table data */
        jQuery('input[name="name"]').val() ? jQuery('.table-label.name').text(jQuery('input[name="name"]').val()):"";

        var type =jQuery('input[name="register_type"]').val();
        if(type == 'farmer'){
            jQuery('.table-label.type').text('农户');
        }else if(type == 'distributor'){
            jQuery('.table-label.type').text('经销商');
        }else if(type == 'other'){
            jQuery('.table-label.type').text('其他');
        }

        var username = jQuery('input[name="farmer_name"]').val() ? jQuery('.table-label.username').text(jQuery('input[name="farmer_name"]').val()):"";
        var gender =jQuery('input[name="gender"]').val() ? jQuery('.table-label.gender').text(jQuery('input[name="gender"]').val()):"";


        var province =jQuery('select[name="province"]').find("option:selected").text() !='请选省' ? jQuery('select[name="province"]').find("option:selected").text():'';
        var city =jQuery('select[name="city"]').find("option:selected").text() !='请选市' ? jQuery('select[name="city"]').find("option:selected").text():'';
        var county =jQuery('select[name="county"]').find("option:selected").text() !='请选县' ? jQuery('select[name="county"]').find("option:selected").text():'';
        var town =jQuery('select[name="town"]').find("option:selected").text() !='请选镇' ? jQuery('select[name="town"]').find("option:selected").text():'';
        var village =jQuery('select[name="village"]').find("option:selected").text() !='请选村' ? jQuery('select[name="village"]').find("option:selected").text():'';
        if(village != ""){
            jQuery('.table-label.address').text(province+city+county+town+village);
        }else if(town != ""){
            jQuery('.table-label.address').text(province+city+county+town);
        }else if(county != "" ){
            jQuery('.table-label.address').text(province+city+county);
        }else if(city != "" ){
            jQuery('.table-label.address').text(province+city);
        }else if(province != ""){
            jQuery('.table-label.address').text(province);
        }

        var details = jQuery('input[name="details"]').val() ? jQuery('.table-label.details').text(jQuery('input[name="details"]').val()):"";
        var cell = jQuery('input[name="cell"]').val() ? jQuery('.table-label.cell').text(jQuery('input[name="cell"]').val()):"";
    })
</script>

